<!--&#45;&#45;chongzhi-->
<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20" :style="{background: `#FAFAFBFF url(${$wanlshop.oss(shop_img, 88, 88)}) no-repeat`,'background-size': '100%','height':'100vh'}">
		<wanl-navbar :isBack="true"
		             :background="{background:`url(${$wanlshop.oss(shop_img, 88, 88)}) no-repeat`,'background-size': '100%'}"
		             :showGongNeng="true"
		             :gongnengColor="'#fff'"
		             :backIconColor="'#fff'"
		>
			<text
				slot="content"
				style="color: #fff; width: 100%; text-align: center;padding-left: 20rpx;font-size:30rpx"
			>
				{{'商家详情'}}
			</text>
		</wanl-navbar>
		<view class="content-box u-p-10 u-m-l-20 u-m-r-20">
			<view class="chongzhi_top">
				<view class="shopName" style="padding-top: 20rpx">{{ shop_name }}</view>
				<view class="shengyu">
					<view class="address">
						<u-icon name="map" size="18" style="margin-right:18rpx" :color="'#777'"></u-icon>
						<view>{{city}}</view>
					</view>
					<view>
						距离我 <text style="color:#FF6121;margin-left: 4rpx">{{ distance + level_unit }}</text>
					</view>
				</view>
			</view>
			<view class="chongzhi_content">
				<view class="chongzhi_title" @click="jump(`/pages/apps/jinyuanbao/shangjia/moreZixun?shop_id=${shop_id}`)">
					<view class="shangjiaZixun">商家资讯</view>
					<view class="more">更多 <u-icon name="arrow-right" size="16" :color="'#777'"></u-icon></view>
				</view>
				<view class="chongzhi_group">
					<view class="zixun-item u-flex u-flex-col u-p-20 u-m-t-20" v-for="(item,index) in artList" @click.stop="jump(`/pages/apps/jinyuanbao/shangjia/zixunDetail?zixunId=${item.id}`)">
						<view class="zixunimg u-p-t-10">
							<image :src="$wanlshop.oss(item.img, 88, 88)"></image>
						</view>
						<view style="display: flex;
								justify-content: space-between;
                                align-items: flex-start;
                                flex-direction: column;
                                width: 75%;
                                height: 160rpx;">
							<view class="zixuntitle text-lines-mp u-p-t-10">{{ item.title }}</view>
							<view class="zixuntime u-p-t-10 u-p-b-10">
								<u-icon name="clock" :color="'#999'" size="14" style="margin-right: 4rpx"></u-icon>
								<text>{{item.createtime}}</text>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

import {mapMutations, mapActions, mapState, mapGetters} from 'vuex';

let chart = null
export default {
	data() {
		return {
			artList:[
			],
			shop_id:'',
			shop_name:'',
			shop_img:'',
			city:'',
			distance:'',
			level_unit:'',
		};
	},
	computed: {
	},
	onPullDownRefresh() {
	
	},
	
	onShow() {
	
	},
	onHide() {
	
	},
	onLoad(options) {
		this.shop_id = options.id;
		this.shop_name = options.shop_name;
		this.shop_img = options.shop_img;
		this.city = options.city;
		this.distance = options.distance;
		this.level_unit = options.level_unit;
		this.init();
	},
	methods: {
		
		// 初始化
		init() {
			this.initdata()
		},
		async initdata(){
			let that = this;
			await uni.request({
				url: '/wanlshop/shop/getShopNewsList',
				method: 'POST',
				data: {
					page: 1,
					shop_id:this.shop_id,
					limit:10
				},
				success: res => {
					that.artList = res.data.data;
				},
			});
		},
		// 路由跳转
		jump(path, parmas) {
			this.$wanlshop.to(path)
		},
	}
};
</script>

<style lang="scss" scoped>
.home-wrap{
	background:rgba(250, 250, 251, 1);
}
.uni-ec-canvas {
	width: 100%;
	height: 400rpx;
	display: block;
}
.uni-ec-canvas-bing {
	width: 100%;
	height: 200rpx;
	display: block;
}
page {
	background: #FAFAFB;
}
.login-btn-start {
	width: 90%;
	margin: 30rpx auto 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 86rpx;
	background: linear-gradient(90deg, #FC6A24, #FC6A24);
	border-radius: 38rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: #ffffff;
	position: fixed;
	bottom: 60rpx;
	left: 4.5%;
}
.chongzhi_top{
	margin-top: 580rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	background: #fff;
	.shopName{
		width: 100%;
		padding-left: 20rpx;
		font-size: 38rpx;
		font-weight: bold;
	}
	.shengyu{
		width: 100%;
		display: flex;
		padding: 20rpx;
		justify-content: space-between;
		font-size: 28rpx;
		padding-bottom :30rpx;
		color:#777777 ;
		.address{
		display: flex;
			justify-content: flex-start;
		}
	}
}
.chongzhi_content{
	width:100%;
	.chongzhi_title{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		.shangjiaZixun{
			position: relative;
			padding-left:18rpx;
			font-size: 32rpx;
			&:after{
				content: "";
				position: absolute;
				top: 8rpx;
				left: 0;
				width: 10rpx;
				height: 30rpx;
				background: #FC6A24;
			}
		}
		.more{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color:#777777 ;
			font-size: 28rpx;
		}
	}
	.zixun-item{
		border-radius: 20rpx;
		background: #fff;
		margin: 30rpx 30rpx 0;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.zixuntitle{
			width: 100%;
			color: #333;
			font-size: 34rpx;
		}
		.zixunimg{
			width: 160rpx;
			height: 160rpx;
			margin-right: 26rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.zixuntime{
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #cccccc;
			font-size: 28rpx;
		}
	}
}
</style>
